<template>
  <div
    id="cesiumContainer"
    ref="cesiumContainer"
  ></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MmE4NGIxYi0xODY1LTQ5ZDEtODRkZi1jMDE4NDA0YTM3MWQiLCJpZCI6MjI2NDA2LCJpYXQiOjE3MjAwODg4NzZ9.EBKimXGOflvb9c_IBerc9T3knO7XZvUt-RffbhKELVE';
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/';
// 设置相机默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);

onMounted(() => {
  // 创建一个 3D 地球或地图查看器
  var viewer = new Cesium.Viewer('cesiumContainer', {});

  // 隐藏cesium logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  //使用primitive添加几何体
  // 使用primitive添加几何体更自由，可自定义外观等
  //一个primitive可添加多个实体
  // #1、创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      115, // 西边经度
      20, // 南纬
      135, // 东经
      30 // 北纬
    ),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });
  let rectGeometry2 = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      150, // 西边经度
      20, // 南纬
      170, // 东经
      30 // 北纬
    ),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });

  // 2、创建几何体实例
  let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.RED.withAlpha(0.5)
      ),
    },
  });
  let instance2 = new Cesium.GeometryInstance({
    id: 'pinkgry',
    geometry: rectGeometry2,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.PINK.withAlpha(0.5)
      ),
    },
  });
  //### 使用fabric设置材质
  let material1 = new Cesium.Material({
    fabric: {
      type: 'Color',
      uniforms: {
        color: Cesium.Color.AQUA.withAlpha(0.5),
      },
    },
  });
  // let material1 = new Cesium.Material.fromType('Color', {
  //   color: Cesium.Color.AQUA.withAlpha(0.5),
  // });

  // 设定几何体都是与地球的椭球体平行EllipsoidSurfaceAppearance
  let appearance = new Cesium.EllipsoidSurfaceAppearance({
    material: material1,
  });
  // 4、图元
  let primitive = new Cesium.Primitive({
    geometryInstances: [instance, instance2],
    appearance: appearance,
    show: true,
  });
  // 5、添加到viewer
  viewer.scene.primitives.add(primitive);
  viewer.camera.zoomTo(viewer.entities);
});
</script>

<style></style>
